<template>
	<view class="page-wrapper" v-if='loginStatus === 1'>
		<div class="content-wrapper" >
			<view class="calendar">
				<uni-calendar 
				:insert="true"
				@change="change"
				 />
			</view>
			<span v-text="date" class="date"></span>
			<ul class="list">
				<li v-for="item in list" :key="item.id" >
					<div>
						<span>姓名:</span>
						<p v-text="item.member_name"></p>
						<button @click="goPay(item.id)" v-if="item.status === 0" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >付款</button>
						<button v-if="item.status === 1 || item.status === -5" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >未派单</button>
						<button v-if="item.status === 2" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >未接单</button>
						<button v-if="item.status === 3" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >待开始</button>
						<button v-if="item.status === 4" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >服务中</button>
						<button @click="goComment(item)" v-if="item.status === 6" style=" background-color: #ffffff; padding: 0; color: #FD6300; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #FD6300; border-radius: 4rpx">待评价</button>
						<button v-if="item.status === 7" style=" background-color: #ffffff; padding: 0; color: #999999; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #999999; border-radius: 4rpx">已完成</button>
					</div>
					<div>
						<span>电话:</span>
						<p v-text="item.member_mobile"></p>
					</div>
					<div>
						<span>订单:</span>
						<p v-text="item.form_label"></p>
					</div>
				</li>
			</ul>
		</div>
		
	</view>
	<view class="un-login" v-else-if='loginStatus === 2'>
		<div>
			<image src="../../static/img/public/order-empty.png" mode="widthFix"></image>
			<span>
				用户未登录
			</span>
			<button @click='goLogin()'>
				去登录
			</button>
		</div>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import drawer from'../../components/drawer/drawer.vue';
	import {api} from '@/util/api.js';
	
	export default {
		components: {
			uniCalendar,
			drawer
		},
		data() {
			return {
				date: '',
				list: [],
				loginStatus: 0
			}
		},
		methods: {
			change(e) {
				// this.date = e.month + "月" + e.date + "日" + " " + "周" +e.lunar.ncWeek.split('星期')[1];
				let tArr = this.$format(new Date(e.fulldate)).split(' ');
				let yArr = tArr[0].split('-');
				this.date = yArr[1] + '月' + yArr[2] + '日' + ' ' + tArr[1];
				
				this.getData(tArr[0]);
			},
			getData(date) {
				api.getServerOrder({
					date
				}, res => {
					this.list = [];
					if(res.data) {
						this.list = res.data
					}
				})
			},
			initDate() {
				let tArr = this.$format(new Date()).split(' ');
				let yArr = tArr[0].split('-');
				this.date = yArr[1] + '月' + yArr[2] + '日' + ' ' + tArr[1];
				this.getData(tArr[0]);
			},
			goComment(item) {
				// console.log('评价');
				uni.navigateTo({
					url: '../member/comment/comment?id=' + item.aunt_ids + '&order_id=' + item.id
				})
			},
			goPay() {
				console.log('付款')
			},
			goLogin() {
				uni.navigateTo({
					url: '../Login/Login'
				})
			}
			
		},
		onLoad() {
			
		},
		onShow() {
			let app = getApp();
			if(app.globalData.loginStatus !== 1) {
				uni.showLoading({
					mask: 'true'
				});
				app.login().then((res)=>{
					if(res.code === 200) {
						this.loginStatus = 1;
						this.initDate();
					} else {
						uni.hideLoading();
						this.loginStatus = 2;
					}
				})
			} else {
				this.loginStatus = 1;
				this.initDate();
			}
			
			
		}
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 100%;
		overflow: hidden;
	}
	.content-wrapper {
		height: 100%;
		width: 100%;
		overflow: auto;
	}
	.address {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	.address>image {
		width: 25.5rpx;
	}
	.address>span {
		margin-left: 20rpx
	}
	.calendar {
		/* margin-top: 30rpx; */
		width: 100%;
		box-sizing: border-box;
		
	}
	.date {
		color: #333333;
		font-size: 28rpx;
		display: inline-block;
		margin-top: 30rpx
	}
	
	.list {
		/* margin-top: 20rpx; */
	}
	.list>li {
		background-color: #ffffff;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 40rpx
	}
	.list>li>div {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #e6e6e6;
		position: relative;
	}
	.list>li>div>span {
		font-size: 26rpx;
	}
	.list>li>div>button{
		position: absolute;
		right: 0
	}
	
	
	.list>li>div>p {
		color: #666666;
		margin-left: 30rpx;
		font-size: 26rpx;
	}
	
	.list>li>div:last-child {
		border: none;
	}
	
	.address-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}
	.address-list>li {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
	}
	.address-list>li.active {
		background-color: #eeeeee;
	}
	.address-item-left {
		font-size: 34rpx;
		color: #A7A7A7;
		background-color: #D8D8D8;
		height: 65rpx;
		width: 65rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	
	
	.address-item-center {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-grow: 1;
		/* border-right: 1rpx solid #eee; */
	}
	.address-item-center-top {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx
	}
	.address-item-center-top>span {
		font-size: 26rpx;
		color: #333333;
	}
	.address-item-center-top>p {
		color: #999999;
		font-size: 20rpx;
		margin-left: 10rpx
	}
	
	.address-item-center-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.address-item-center-bottom>span {
		font-size: 14rpx;
		color: #027AFF;
		background-color: #87C6FF;
		display: inline-block;
		width: 39rpx;
		height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}
	.address-item-center-bottom>p {
		color: #666666;
		font-size: 22rpx;
	}
	
	
	.un-login {
		display: flex;;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		height: 100%;
		width: 100%;
	}
	.un-login>div {
		display: flex;;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.un-login>div>image {
		width: 328rpx;
	}
	.un-login>div>span {
		color: #666666;
		font-size: 24rpx;
		margin-top: 30rpx
	}
	.un-login>div>button {
		margin-top: 30rpx;
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
	}
	
	
	
</style>
